import Icon from '@/components/Icon'
import { useDispatch, useSelector } from 'react-redux'
import styles from './index.module.scss'
import { differenceBy } from 'lodash'
import classNames from 'classnames'
import { useState } from 'react'
import { addChannel, delChannel } from '@/store/actions/home'
import { Toast } from 'antd-mobile-v2'

const Channels = ({ onClose, active, changeActive }) => {
  const dispatch = useDispatch()
  const userChannels = useSelector((state) => state.home.userChannels)
  const optionChannels = useSelector((state) => {
    const { allChannels } = state.home
    // return allChannels.filter((item) => {
    //   const index = userChannels.findIndex((v) => v.id === item.id)
    //   return index === -1
    // })
    return differenceBy(allChannels, userChannels, 'id')
  })
  const [editable, setEditable] = useState(false)
  // 添加
  const handleAdd = (channel) => {
    dispatch(addChannel(channel))
  }
  const handleDel = (channel, index) => {
    if (userChannels.length <= 5) {
      Toast.info('至少留5个')
      return
    }
    if (index === active) {
      changeActive(0)
    }
    if (index < active) {
      changeActive(active - 1)
    }
    dispatch(delChannel(channel))
  }
  return (
    <div className={styles.root}>
      {/* 顶部栏：带关闭按钮 */}
      <div className="channel-header">
        <Icon type="iconbtn_channel_close" onClick={onClose} />
      </div>

      {/* 频道列表 */}
      <div className="channel-content">
        {/* 当前已选择的频道列表 */}
        <div className={classNames('channel-item', { edit: editable })}>
          <div className="channel-item-header">
            <span className="channel-item-title">我的频道</span>
            <span className="channel-item-title-extra">
              {editable ? '点击删除频道' : '点击进入频道'}
            </span>
            <span
              className="channel-item-edit"
              onClick={() => setEditable(!editable)}
            >
              {editable ? '保存' : '编辑'}
            </span>
          </div>

          <div className="channel-list">
            {userChannels.map((item, index) => (
              <span
                key={item.id}
                onClick={() => {
                  if (editable) return
                  changeActive(index)
                  onClose()
                }}
                className={classNames('channel-list-item', {
                  selected: index === active,
                })}
              >
                {item.name}
                {editable && index !== 0 && (
                  <Icon
                    type="iconbtn_tag_close"
                    onClick={() => handleDel(item, index)}
                  />
                )}
              </span>
            ))}
          </div>
        </div>

        {/* 推荐的频道列表 */}
        <div className="channel-item">
          <div className="channel-item-header">
            <span className="channel-item-title">频道推荐</span>
            <span className="channel-item-title-extra">点击添加频道</span>
          </div>
          <div className="channel-list">
            {optionChannels.map((item) => (
              <span
                key={item.id}
                className="channel-list-item"
                onClick={() => handleAdd(item)}
              >
                + {item.name}
              </span>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}

export default Channels
